<template>
	<view>
		<view class='audio_view' v-if="isAudio  && show">
			<view>
				<text>歌名:{{audioname}}</text>
				<slider block-color="#FF0000"  @change="au_len_ch" 
					step="1" min="0" :max="max" :value="now"></slider>
			</view>
			<view>
				<checkbox-group @change="loop_change" >
					<checkbox class="mybtn">循环</checkbox>
					<text>{{time_now}} / {{time_tol}}</text>
				</checkbox-group>
				<button @click="play_music(1)">播放</button>
				<button @click="play_music(0)">暂停</button>
				<!-- #ifdef H5 -->
				<a  :href="url" target='_blank' >
					<button>下载</button>
				</a>
				<!-- #endif -->
				<!-- #ifndef H5 -->
				<button  @click="download_music">下载</button>
				<!-- #endif -->
				<view>
					<text>音量:</text>
					<slider value="0.2" @changing="au_vol_ch" @change="au_vol_ch"
					  step="0.05" min="0" max="0.8"></slider>
				</view>
			</view>
			
			<view class="playlist">
				<text>播放列表</text>
				<view class="item" v-for="(item,i) in myMusicList" :key="i">
					<text class="line">{{item.name}}</text>
					<button class="btn-small" size="mini" @click="playlist_rm(i)">移除</button>
					<button class="btn-small" size="mini" @click="playlist_pl(i)">播放</button>
				</view>
			</view>
			<view style="height: 300rpx;">
				
			</view>
		</view>
		<view class='video_view' v-if="!isAudio && show">
			<view>
				<text>{{video_name}}</text>
			</view>
			<view>
				<video id='myvideo' :src='video_url' loop autoplay="false" 
				@timeupdate="vi_time_up"></video>
			</view>
			<view style="background-color: #DD524D;">
				<slider  @change="vi_len_ch" step="1" :max="vi_max" :value="vi_now"></slider>
			</view>
			<view>
				<text>{{video_now}} / {{video_tol}}</text>
			</view>
			<button @click="video_play(1)">播放</button>
			<button @click="video_play(0)">暂停</button>
			<!-- #ifdef H5 -->
			<a :href="video_url"><button>下载</button></a>
			<!-- #endif -->
			<!-- #ifndef H5 -->
			<button @click="video_download">下载</button>
			<!-- #endif -->
			<button @click="full_screen">全屏</button>
			
		</view>
		
		<view>
			
		</view>
		
	</view>
</template>

<script>
	import common from "../../common/common.js"
	export default {
		data() {
			return {
				show: false,
				
				video_url: '',
				video_name: '',
				video_ctx: undefined,
				isAudio: true,
				vi_max: 2,
				vi_now:0,
				video_now: '',
				video_tol: '',
				
				max: 2,
				now: 0.1,
				audioname:'',
				url:'',
				playing_index: 0,
				isLoop: false,
				time_now: '',
				time_tol: '',
				myMusicList: [],  // 全局的播放列表无法双向绑定，必须在页面内新建一个本地的变量
			}
		},
		onLoad(){
			if(!common.ctx)
				common.ctx  = uni.createAudioContext()
			common.ctx.volume= 0.2
			common.ctx.loop= this.isLoop
			// common.ctx.autoplay=true
			common.ctx.onTimeUpdate(()=>{
				if( common.ctx.duration){
					this.max = parseInt(common.ctx.duration)
					this.now =parseInt(common.ctx.currentTime) 
					this.update_time_text(this.now,this.max)
				}
			})
			common.ctx.onEnded(()=>{
				if( ! this.isLoop){
					this.playing_index=(this.playing_index+1) % this.music_list.length;
					this.music_play(this.music_list[this.playing_index])
				}
			})
			this.video_ctx=uni.createVideoContext('myvideo')
		},
		onShow() {  // 显示
			this.myMusicList = this.music_list;
			// 判断是否登陆
			if (! this.userID.id ){
				console.log("play:"+ this.userID.id)
				this.show = false
				uni.showToast({
					title:'请先登陆'
				})
				return
			}else
				this.show = true;
			// 判断是否点了播放而跳转过来 的
			if(common.tmp){
				if(common.tmp.type=='audio'){  // 音频
					this.isAudio=true;
					this.music_stop()
					this.music_play(common.tmp)
					this.push_to_playlist([common.tmp])
					for(var i=0; i<this.music_list.length; i++){
						if (common.tmp.listID == this.music_list[i].listID){
							this.playing_index = i
							break
						}
					}
				}else{      // 视频
					if(common.ctx)
						common.ctx.pause()
					this.video_ctx.stop()
					this.video_url=common.tmp.src 
					this.video_name=common.tmp.name
					this.vi_now=0
					this.vi_max=2
					this.isAudio=false
				}
				common.tmp=null
			}
			// 判断是否添加了列表
			if (common.musicList.length > 0){
				this.push_to_playlist(common.musicList)
				common.musicList = [];
			}
		},
		onHide() {
			// this.video_ctx.pause()
		},
		methods: {
			update_time_text(now, tol){  // 更新显示的时间
				this.time_now =  this.num_to_time(now)
				this.time_tol = this.num_to_time(tol)
			},
			num_to_time(num){  // 秒转为  00：00：00的格式
				var h,m,s;
				( "00" + num ).substr( -2 )
				h = ( "00" +  parseInt(num / 3600) ).substr( -2 ) ;
				m =( "00" + parseInt( (num-3600*h) / 60 ) ).substr( -2 ) ;
				s = ( "00" + parseInt((num-3600*h-60*m)) ).substr( -2 );
				var times= h + ":" + m + ':' + s;
				return times
			},
			loop_change(e){   // 循环checkbox改变
				if(e.detail.value.length == 1){
					this.isLoop = true
					common.ctx.loop=true
				}else{
					this.isLoop = false
					common.ctx.loop=false
				}
			},
			playlist_rm(i){  // 播放列表的移除
				if(i == this.playing_index){
					this.music_stop();
				}
				this.myMusicList.splice(i,1);
				this.music_list = this.myMusicList;
				if(i<this.playing_index)
					this.playing_index--
				if(this.music_list.length>0 ){
					if (this.playing_index>=this.music_list.length){
						this.playing_index=0
					}
					this.music_play(this.music_list[this.playing_index])
				}
				
			},
			playlist_pl(i){  // 播放列表的播放
				this.music_play(this.music_list[i])
				this.playing_index=i
			},
			music_stop(){  //停止音乐
				this.now=0.1
				this.max=2
				common.ctx.stop()
			},
			music_play(item){  // 播放item中的音乐
				if ( ! item )
					return
				common.ctx.src=item.src
				this.url=item.src
				this.audioname=item.name
				this.isAudio=true
				setTimeout(()=>{
					common.ctx.play()
				},500)
			},
			video_play(flag){
				if(flag == 1){
					this.video_ctx.play()
				}else{
					this.video_ctx.pause()
				}
			},
			vi_time_up(e){
				if (e.detail.duration){
					this.vi_max =parseInt(e.detail.duration)
					this.vi_now = parseInt(e.detail.currentTime)
					this.video_now=this.num_to_time(this.vi_now )
					this.video_tol=this.num_to_time(this.vi_max)
				}
			},
			vi_len_ch(e){
				this.video_ctx.seek(parseInt(e.detail.value))
			},
			au_len_ch(e){
				common.ctx.seek(parseInt(e.detail.value))
			},
			au_vol_ch(e){
				common.ctx.volume=e.detail.value
			},
			front(){
				this.video_ctx.play()
			},
			play_music(flag){   // 播放和暂停
				if(!common.ctx.src ) return
				if(flag==1){  // 当前暂停
					if (this.music_list.length != 0)
						common.ctx.play()
				}else{
					common.ctx.pause()
				}
			},
			download_music(){
				if(common.ctx.src){
					uni.downloadFile({
						url: common.ctx.src,
						success:(res)=>{
							uni.saveFile({
								tempFilePath:res.tempFilePath,
								success: (e) => {
									uni.showModal({
										content:'下载成功，保存在：'+e.savedFilePath
									})
								}
							})
						}
					})
				}
			},
			video_download(){
				uni.downloadFile({
					url: this.video_url,
					success:(res)=>{
						uni.saveFile({
							tempFilePath:res.tempFilePath,
							success: (e) => {
								uni.showModal({
									content:'下载成功，保存在：'+e.savedFilePath
								})
							}
						})
					}
				})
			},
			full_screen(){
				this.video_ctx.requestFullScreen({
					direction: 90
				})
			}
		}
	}
</script>

<style>
.mybtn,button{
	background-color: #4CD964;
	height: 60rpx;
	border-radius:20rpx;
	font-size: 44rpx;
	line-height: 60rpx;
	margin-bottom: 15rpx;
	margin-left: 20rpx;
	display: inline-block;
}
text{
	text-align: center;
}
video{
	width: 750rpx;
}
.audio_view{
	top: 100rpx;
	position: relative;
	border: 1rpx solid #4CD964 ;
	border-radius: 20rpx;
	background-color: #F0E68C;
}
.video_view{
	top: 100rpx;
	position: relative;
}
.icon-font{
	font-size: 90rpx;
	display: inline;
	margin: 0rpx 100rpx;
}
.vol_slider{
	display: inline;
	width: 300rpx;
}
.playlist{
	border-radius: 10rpx;
	background-color: #EFEFDE;
}
.item{
	border: 2rpx solid #007AFF;
	margin: 5rpx;
}
.line{
	display: block;
	overflow: hidden;
}
.btn-small{
	font-size: 22rpx;
	background-color: #9BCD9B;
}
</style>
